@charset "utf-8";
.lunbo {
    width: 1200px;
    margin: 0 auto;
    height: 535px;
    .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
        line-height: 0px;
        font-size: 0px;
        overflow: hidden;
    }
    .swiper-button-prev { 
        left: 10px;
        position: absolute;
        top: 230px;
    }
    .swiper-button-next,
    .swiper-button-prev {
        cursor: pointer;
        z-index: 10;
        font-size: 50px;
        color: #727171;
        display: inline-block;
    }
}

.vancl_countdown {
    width: 1200px;
    margin: 0 auto;
    .recharge {
        padding: 40px 0 50px;
    }
    .countdown {
        height: 60px;
        width: 1200px;
        background-image: url(../img/shouye/ms_bg0814.png);
        position: relative;
        margin-bottom: 35px;
        .countd {
            width: 32px;
            height: 32px;
            font-size: 18px;
            color: #a10000;
            font-family: "microsoft yahei";
            text-align: center;
            line-height: 32px;
            background-color: white;
            position: absolute;
            top: 13px;
            right: 11px;
            z-index: 0;
            animation-duration: 20000ms;
            animation-fill-mode: forwards;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }
        .countd_one {
            animation-name: sw1;
        }
        @keyframes sw1 {
            0%,
            5% {
                z-index: 3;
            }
        }
        .countd_two {
            animation-name: sw2;
        }
        @keyframes sw2 {
            5%,
            10% {
                z-index: 3;
            }
        }
        .countd_three {
            animation-name: sw3;
        }
        @keyframes sw3 {
            10%,
            15% {
                z-index: 3;
            }
        }
        .countd_four {
            animation-name: sw4;
        }
        @keyframes sw4 {
            15%,
            20% {
                z-index: 3;
            }
        }
        .countd_five {
            animation-name: sw5;
        }
        @keyframes sw5 {
            20%,
            25% {
                z-index: 3;
            }
        }
        .countd_six {
            animation-name: sw6;
        }
        @keyframes sw6 {
            25%,
            30% {
                z-index: 3;
            }
        }
        .countd_seven {
            animation-name: sw7;
        }
        @keyframes sw7 {
            30%,
            35% {
                z-index: 3;
            }
        }
        .countd_eight {
            animation-name: sw8;
        }
        @keyframes sw8 {
            35%,
            40% {
                z-index: 3;
            }
        }
        .countd_nine {
            animation-name: sw9;
        }
        @keyframes sw9 {
            40%,
            45% {
                z-index: 3;
            }
        }
        .countd_ten {
            animation-name: sw10;
        }
        @keyframes sw10 {
            45%,
            50% {
                z-index: 3;
            }
        }
        .countd_eleven {
            animation-name: sw11;
        }
        @keyframes sw11 {
            50%,
            55% {
                z-index: 3;
            }
        }
        .countd_twelve {
            animation-name: sw12;
        }
        @keyframes sw12 {
            55%,
            60% {
                z-index: 3;
            }
        }
        .countd_thirteen {
            animation-name: sw13;
        }
        @keyframes sw13 {
            60%,
            65% {
                z-index: 3;
            }
        }
        .countd_fourteen {
            animation-name: sw14;
        }
        @keyframes sw14 {
            65%,
            70% {
                z-index: 3;
            }
        }
        .countd_fifteen {
            animation-name: sw15;
        }
        @keyframes sw15 {
            70%,
            75% {
                z-index: 3;
            }
        }
        .countd_sixteen {
            animation-name: sw16;
        }
        @keyframes sw16 {
            75%,
            80% {
                z-index: 3;
            }
        }
        .countd_seventeen {
            animation-name: sw17;
        }
        @keyframes sw17 {
            80%,
            85% {
                z-index: 3;
            }
        }
        .countd_eighteen {
            animation-name: sw18;
        }
        @keyframes sw18 {
            85%,
            90% {
                z-index: 3;
            }
        }
        .countd_nineteen {
            animation-name: sw19;
        }
        @keyframes sw19 {
            90%,
            95% {
                z-index: 3;
            }
        }
        .countd_twenty {
            animation-name: sw20;
        }
        @keyframes sw20 {
            95%,
            100% {
                z-index: 3;
            }
        }
        .countd_twentyone {
            animation-name: sw21;
        }
        @keyframes sw21 {
            100% {
                z-index: 3;
            }
        }
    }
    .seckill {
        font-size: 0;
        overflow: hidden;
        height: 460px;
        position: relative;
        ul li {
            z-index: 1;
        }
        .seckill_one {
            position: absolute;
            left: 0;
            top: 0;
        }
        .seckill_two {
            position: absolute;
            left: 242px;
            top: 0;
        }
        .seckill_three {
            position: absolute;
            left: 484px;
            top: 0;
        }
        .seckill_four {
            position: absolute;
            left: 726px;
            top: 0;
        }
        .seckill_five {
            position: absolute;
            right: 0;
            top: 0;
        }
        .seckillimg {
            z-index: 0;
            animation-name: seckillimg;
            animation-duration: 40s;
            animation-fill-mode: forwards;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }
        @keyframes seckillimg {
            0%,
            10%,
            20%,
            30%,
            40%,
            50%,
            56% {
                z-index: 0;
            }
            56%,
            70%,
            80%,
            90%,
            100% {
                z-index: 2;
            }
        }
        .seckillimg1 {
            z-index: 2;
            animation-name: seckillimg1;
            animation-duration: 40s;
            animation-fill-mode: forwards;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }
        @keyframes seckillimg1 {
            0%,
            10%,
            20%,
            30%,
            40%,
            50%,
            55% {
                z-index: 2;
            }
            55%,
            70%,
            80%,
            90%,
            100% {
                z-index: 0;
            }
        }
    }
}

.recommend {
    width: 1200px;
    margin: 0 auto;
    h2 {
        text-align: center;
        line-height: 50px;
        margin: 30px 0px;
        font-family: "Microsoft YaHei";
        color: #9a9a9a;
        font-size: 18px;
        font-weight: normal;
    }
    ul li {
        margin-right: 17px;
        display: inline;
        list-style: none;
        margin-bottom: 16px;
        h3 {
            height: 68px;
            padding: 0px 12px;
            line-height: 68px;
            border: 1px solid #e8e7ec;
            border-top: 0px;
            font-family: "Microsoft YaHei";
            font-size: 14px;
            font-weight: normal;
            color: #333333;
            span {
                margin-top: 20px;;
                float: right;
                color: #a10000;
                font-family: Arial;
                line-height: 24px;
                font-size: 14px;
            }
        }
    }
    .recommend_imgone{
        width: 590px;
        height: 509px;
    }
    .recommend_imgfour{height: 509px; margin-right: 0;margin-top: -263px;}
    .recommend_col{margin-top: 16px;}
}
.navigation{
    position: fixed;
    right: 10px;
    bottom: 20px;
    width: 75px;
    z-index: 10;
    a{display: block;}
    li:first-child a{
       width: 75px;
       height: 78px; 
       background-image: url(../img/shouye/baywindow.png);
    }
    li:nth-child(2) a{
        width: 75px;
        height: 71px;
       background-image: url(../img/shouye/baywindow.png);
       background-position-y: -78px;
    }
    li:nth-child(3) a{
        width: 75px;
        height: 57px;
       background-image: url(../img/shouye/baywindow.png);
       background-position-y: -149px;
    }
    
}
